<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    legend: {
        show: true,
        top: '2%',
        textStyle: {
            color: '#FFFFFF',
        },
        icon: 'circle', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    },
    grid: {
        left: '4%',
        right: '4%',
        bottom: '5%',
        top: '15%',
        containLabel: true,
    },
    xAxis: {
        data: props.xData,
        triggerEvent: true,
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: true,
            rotate: 0,
            interval: 0,
            textStyle: {
                padding: [14, 0, 0, 0],
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
            },
        },
    },
    yAxis: [
        {
            name: '',
            nameTextStyle: {
                align: 'right'
            },
            axisLabel: {
                formatter: '{value}',
                color: 'rgba(255,255,255,0.52)',
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        }
    ],
    series: [
        {
            type: 'bar',
            data: props.sData,
            label: {
                normal: {
                    position: 'top',
                    color: '#fff',
                    show: true,
                },
            },
            // barWidth: 15,
            itemStyle: {
                normal: {
                    color: function (params) {
                        let colorList = ['#F69430', '#2ACEFC', '#3498DB', '#E74C3C']
                        let colorItem = colorList[params.dataIndex];
                        return colorItem;
                    }
                }
            }
        }
    ],
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
